import React from 'react'
import './index.css'
export default function PinyinSwitch({showPinyin,onChange}:{showPinyin:boolean,onChange?:(val: boolean)=>void}) {
    const [isPinyin, setIsPinyin] = React.useState(false)
    React.useEffect(() => {
        setIsPinyin(showPinyin)
    }, [showPinyin])

    const switchPy = () => {
        onChange?.(!isPinyin)
        setIsPinyin(!isPinyin)
    }
    return <div className="relative w-[2rem] h-[2rem] rounded-[1rem] self-center text-center leading-8 font-bold cursor-pointer overflow-hidden" onClick={switchPy}>
        <span className={isPinyin?'text-white':'text-gray-400'}>拼</span>
        <div className={`line ${isPinyin?'shrinking-animating':'growing-animating'}`}></div>
    </div>
}